<template>
    <div>
      <!--    查询功能-->
      <div style="margin-bottom: 5px">
        <el-button type="primary" style="margin-left: 5px" @click="queryAll"
          >查询</el-button>
        <!--      新增按钮-->
        <el-button type="primary" style="margin-left: 5px" @click="add"
          >新增</el-button
        >
      </div>
  
      <!--    列表展示-->
      <el-table
        :data="department"
        :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
      >
        <el-table-column prop="id" label="部门ID" width="180"> </el-table-column>
        <el-table-column prop="name" label="部门名称" width="160"> </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="gmtModified" label="修改时间" width="180">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"> </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="mod(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="del(scope.row.id)"
              style="margin-left: 5px"
            >
              <el-button slot="reference" size="small" type="danger"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  

      <el-dialog
        title="学院信息"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
        :before-close="handleClose"
      >
        <!--      新增部门信息表单-->
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="部门名称" prop="name">
            <el-col :span="15">
              <el-input v-model="form.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-radio-group v-model="form.sort">
              <el-input-number
                v-model="form.sort"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { queryAll, mod, add, del } from "@/api/departmentalServices/departmentManagement";
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "departmentManagement",
    data() {
      return {
        department: [],
        centerDialogVisible: false,
        form: {
          id:"",
          clubId:"",
          name: "",
          sort: "",
        },
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        },
      };
    },
    methods: {
      //重置表单
      resetForm() {
        this.$refs.form.resetFields();
        this.form = {
          id:"",
          clubId:"",
          name: "",
          sort: "",
        }
        //将计数器的数字重置为1
        this.num = 1;
      },
  
      //新增按钮
      add() {
        this.centerDialogVisible = true;
        this.$nextTick(() => {
          this.resetForm();
        });
      },
      //修改
      mod(row) {
        this.centerDialogVisible = true;
        this.$nextTick(() => {
          //赋值到表单
          this.form.id = row.id
          this.form.name = row.name
          this.form.sort = row.sort
          this.form.clubId = row.clubId
        });
      },
      //删除
      del(id) {
        del(id).then((res) => {
          if (res.code === 20000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.centerDialogVisible = false;
            this.queryAll();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      },
      doMod() {
        mod(this.form.id,this.form).then((res) => {
          if (res.code === 20000) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.centerDialogVisible = false;
            this.queryAll();
            this.resetForm();
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
      },
      doSave() {
        add(this.form).then((res) => {
          if (res.code === 20000) {
            this.$message({
              message: "增加成功",
              type: "success",
            });
            this.centerDialogVisible = false;
            this.queryAll();
            this.resetForm();
          } else {
            this.$message({
              message: "增加失败",
              type: "error",
            });
          }
        });
      },
      //提交数据到后台
      save() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if ( this.form.id) {
              //如果有id则修改
              this.doMod();
            } else {
              //否则增加
              this.doSave();
            }
          } else {
            this.$message({
              message: "操作失败",
              type: "error",
            });
            return false;
          }
        });
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      resetParam() {
        this.searchForName = "";
        this.queryAll();
      },
      queryAll() {
        queryAll().then((res) => {
          console.log(res);
          if (res.code === 20000) {
            this.department = res.data.depts;
          } else {
            alert("获取数据失败");
          }
        });
      },
    },
    beforeMount() { 
      this.queryAll();
    },
  };
  </script>
  
  <style scoped>
  .pagination-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    /*background-color: #f5f5f5;*/
    padding: 10px 20px;
    /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .pagination-container {
    max-width: 800px; /* 设置最大宽度以避免在大屏幕上过分拉伸 */
    margin: 0 30%; /* 居中显示分页组件 */
  }
  </style>
  